﻿// ajax请求json数据
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "../json/goods.json");
xhttp.send();
xhttp.onreadystatechange = function () {
  // 请求到后才将数据传到页面
  if (this.readyState == 4 && this.status == 200) {
    
    let sliUlEl = document.querySelector(".slideshow");
    let arr = JSON.parse(this.response);
    let newarr = [];
    // 拿到前10条数据
    for (let i = 0; i < 10; i++) {
      newarr.push(arr[i]);
    }
    // 将数据打乱后传到页面
    for (let i = newarr.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [newarr[i], newarr[j]] = [newarr[j], newarr[i]];
    }
    newarr.map((item) => {
      sliUlEl.innerHTML += `<li class="ion">
  <a href="#" title="查看详情" class="check-detail">
      <img src="${item.imgurlloog}" alt="" />
  </a>
  <span class="title">${item.synopsis}</span>
  <span class="id">${item.id}</span>
</li>`;
    });
    // 分页器操作
let LiELs = [...document.querySelectorAll(".on")];
let ion = [...document.querySelectorAll(".ion")];
// t表示当前页面的位置初始位置为1
let t = 1;
var IF = 0;
LiELs.map(
  (item, i) =>
  // 小圆点鼠标移动事件  IF表示是否继续自动滚动,当鼠标移动到小圆点时
  // IF为1此时不需要自动滚动移出时为0
    (item.onpointermove = function () {
      IF = 1;
      item.getAttribute("id") == "lon"
        ? ""
        : LiELs.map((item1, j) => {
            ion[j].style.transform = `translate(${i * -700}px,0px)`;
            item1.setAttribute("id", "");
          }),
        item.setAttribute("id", "lon"),
        (t = i + 1);
    })
);
LiELs.map(
  (item) =>
    (item.onmouseout = function () {
      IF = 0;
    })
);
const intervalId = setInterval(function () {
  if (IF == 0) {
    // 如果是最后一位
    if (ion.length == t) {
      ion.map((item1) => {
        item1.style.transition = "all 0s";
        item1.style.transform = `translate(0)`;
      });
      t = 1;
    } else {
      ion.map((item1) => {
        item1.style.transition = "all .3s";
        item1.style.transform = `translate(${t * -700}px,0px)`;
      });
      t++;
    }
    var p = 0;
    LiELs.forEach((item, i) => {
      if (item.getAttribute("id") == "lon" && p == 0) {
        if (LiELs.length == i + 1) {
          LiELs.map((item1) => {
            item1.setAttribute("id", "");
          });
          LiELs[0].setAttribute("id", "lon");
        } else {
          LiELs.map((item1) => {
            item1.setAttribute("id", "");
          });
          LiELs[i + 1].setAttribute("id", "lon");
          p = 1;
        }
      }
    });
  }
}, 2500);
// 跳转策略
let hrefEls = [...document.querySelectorAll(".check-detail")];
let idEls = [...document.querySelectorAll(".id")];
hrefEls.map((item,i)=>item.onclick=function(){
  // 先判断是否登录状态
  sessionStorage.setItem("introduceId",idEls[i].innerText)
  window.parent.location.href="./详情页.html"
})

  };
};